@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: theme('colors.blue.600');
    --color-secondary: theme('colors.gray.600');
  }
  
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100;
    @apply min-h-screen font-sans antialiased;
  }
  
  h1, h2, h3, h4 {
    @apply font-semibold tracking-tight;
  }
  
  a {
    @apply text-primary hover:text-primary/80 transition-colors;
  }

  h2 {
    color: #42b983;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eaeaea;
    @apply text-lg mb-6;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center;
    @apply px-4 py-2 rounded-md font-medium;
    @apply bg-primary text-white hover:bg-primary/90;
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow;
    @apply p-6 border border-gray-200 dark:border-gray-700;
  }

  .edit-card {
    @apply rounded-lg shadow-sm p-4 bg-[#f8f8f8];
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .scroll-mt-header {
    scroll-margin-top: theme('spacing.20');
  }
}